<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/exam.css">
<link rel="stylesheet" type="text/css" href="/Template/css/checkbox.css">
<script type="text/javascript" src="/Template/js/amazeui.js"></script>
<script type="text/javascript" src="/Template/js/jquery.checkbox.js"></script>
<script type="text/javascript">


    $(function() {

        //初始化页面配置
        initPage("脊柱侧弯数字化绘制");

        var app = new Vue({
            el: '#container',
            data: {
            },
            methods: {
                cancel: function() {
                    window.location.href = "/wechat/workorder/index/id/{$workorderId}";
                },
                save: function() {

                    var chest1 = "";
                    var chest2 = "";
                    var chest3 = "";
                    var chest4 = "";
                    var chest1Arr = [];
                    var chest2Arr = [];
                    var chest3Arr = [];
                    var chest4Arr = [];
                    $("#checkbox1 input[type='checkbox']").each(function(){
                        if($(this).is(":checked")){
//                            alert($(this).val());
                            chest1 += $(this).val() + ",";
                            chest1Arr.push($(this).val());
                        }
                    });

                    $("#checkbox2 input[type='checkbox']").each(function(){
                        if($(this).is(":checked")){
                            chest2 += $(this).val() + ",";
                            chest2Arr.push($(this).val());
                        }
                    });
                    for(var i=0;i<chest2Arr.length;i++) {
                        if ($.inArray(chest2Arr[i], chest1Arr) >= 0) {
                            alert("侧位有部位冲突");
                            return;
                        }
                    }

                    $("#checkbox3 input[type='checkbox']").each(function(){
                        if($(this).is(":checked")){
                            chest3 += $(this).val() + ",";
                            chest3Arr.push($(this).val());
                        }
                    });
                    $("#checkbox4 input[type='checkbox']").each(function(){
                        if($(this).is(":checked")){
                            chest4 += $(this).val() + ",";
                            chest4Arr.push($(this).val());
                        }
                    });
                    for(var i=0;i<chest4Arr.length;i++) {
                        if ($.inArray(chest4Arr[i], chest3Arr) >= 0) {
                            alert("正位有部位冲突");
                            return;
                        }
                    }

                    var examMeasureSpineId = $("input[name=examMeasureSpineId]").val();
                    var workorderId = $("input[name=workorderId]").val();

                    var completed = "1";
//                    if(isNullOrEmpty(chest1 || chest2) || isNullOrEmpty(chest3 || chest4)) {
//                        completed = "-1";
//                    }

                    $.ajax({
                        url:"/wechat/workorder/examMeasureSpineDrawPost",
                        type:"post",
                        data:{
                            examMeasureSpineId: examMeasureSpineId,
                            workorderId: workorderId,
                            chest1: chest1,
                            chest2: chest2,
                            chest3: chest3,
                            chest4: chest4,
                            completed:completed,
                        },
                        dataType:"JSON",
                        beforefootSend:function(){
                            $("#loadingToast").show();
                        },
                        complete:function(){
                            $('#loadingToast').hide();
                        },
                        success:function(data){
                            if(data.code == 200) {
//                                alert(data.alert);
                                alert("保存成功");
                                window.location.href = "/wechat/workorder/index/id/{$workorderId}";
                            }
                        },
                    })

                }
            }
        })
//        $(".item select").change(function() {
//            var value = $(this).find("option:selected").text();
//            $(this).prev().val(value);
//        });

        $("#checkbox1").checkbox({
            reqUnit: function () {
//            alert("点击复选框执行的后台操作");
            }, reqAll: function () {
//            alert("点击全选复选框执行的后台操作");
            }
        });
        $("#checkbox2").checkbox({
            reqUnit: function () {
            }, reqAll: function () {
            }
        });
        $("#checkbox3").checkbox({
            reqUnit: function () {
            }, reqAll: function () {
            }
        });
        $("#checkbox4").checkbox({
            reqUnit: function () {
            }, reqAll: function () {
            }
        });

        var chest1 = "{$examMeasureSpine.chest1}";
        var chest1Arr = chest1.split(",");
        for(var i=0;i<chest1Arr.length;i++){
            var name = "sideLeft"+chest1Arr[i];
//            alert(name);
            $("input[name='" + name + "']").attr("checked", true);
            $("label[name='" + name + "']").addClass("checked");
        }

        var chest2 = "{$examMeasureSpine.chest2}";
        var chest2Arr = chest2.split(",");
        for(var i=0;i<chest2Arr.length;i++){
            var name = "sideRight"+chest2Arr[i];
            $("input[name='" + name + "']").attr("checked", true);
            $("label[name='" + name + "']").addClass("checked");
        }

        var chest3 = "{$examMeasureSpine.chest3}";
        var chest3Arr = chest3.split(",");
        for(var i=0;i<chest3Arr.length;i++){
            var name = "frontLeft"+chest3Arr[i];
//            alert(name);
            $("input[name='" + name + "']").attr("checked", true);
            $("label[name='" + name + "']").addClass("checked");
        }

        var chest4 = "{$examMeasureSpine.chest4}";
        var chest4Arr = chest4.split(",");
        for(var i=0;i<chest4Arr.length;i++){
            var name = "frontRight"+chest4Arr[i];
            $("input[name='" + name + "']").attr("checked", true);
            $("label[name='" + name + "']").addClass("checked");
        }

    })



</script>

<div class="container" id="container">
    <div class="hint-info">
        <span class="update_time">{$formDict.update_time}：{$examMeasureSpine.update_time2}</span>
        <span class="employee_name">{$formDict.update_name}：{$employeeName}</span>
    </div>
    <div class="edit-info">
        <div class="edit-content" >
            <input type="text" style="display: none;" name="workorderId" value="{$workorderId}">
            <input type="text" style="display: none;" name="examMeasureSpineId" value="{$examMeasureSpineId}">
        </div>
    </div>
    <div class="main">
        <div class="main-left">
            <div class="main-1">
                <div id="checkbox1">
                    <div style="float: right">
                        <div class="no-gap">
                            <input type="checkbox" value="0" name="sideLeft0"/>
                            <label class="unit-box" name="sideLeft0"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="1" name="sideLeft1"/>
                            <label class="unit-box" name="sideLeft1"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="2" name="sideLeft2"/>
                            <label class="unit-box" name="sideLeft2"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="3" name="sideLeft3"/>
                            <label class="unit-box" name="sideLeft3"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="4" name="sideLeft4"/>
                            <label class="unit-box" name="sideLeft4"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="5" name="sideLeft5"/>
                            <label class="unit-box" name="sideLeft5"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="6" name="sideLeft6"/>
                            <label class="unit-box" name="sideLeft6"></label>
                        </div>
                    </div>
                    <div>
                        <div class="no-gap">
                            <input type="checkbox" value="7" name="sideLeft7"/>
                            <label class="unit-box" name="sideLeft7"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="8" name="sideLeft8"/>
                            <label class="unit-box" name="sideLeft8"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="9" name="sideLeft9"/>
                            <label class="unit-box" name="sideLeft9"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="10" name="sideLeft10"/>
                            <label class="unit-box" name="sideLeft10"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="11" name="sideLeft11"/>
                            <label class="unit-box" name="sideLeft11"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="12" name="sideLeft12"/>
                            <label class="unit-box" name="sideLeft12"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="13" name="sideLeft13"/>
                            <label class="unit-box" name="sideLeft13"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="14" name="sideLeft14"/>
                            <label class="unit-box" name="sideLeft14"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="15" name="sideLeft15"/>
                            <label class="unit-box" name="sideLeft15"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="16" name="sideLeft16"/>
                            <label class="unit-box" name="sideLeft16"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="17" name="sideLeft17"/>
                            <label class="unit-box" name="sideLeft17"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="18" name="sideLeft18"/>
                            <label class="unit-box" name="sideLeft18"></label>
                        </div>
                    </div>
                    <div style="float: right">
                        <div class="no-gap">
                            <input type="checkbox" value="19" name="sideLeft19"/>
                            <label class="unit-box" name="sideLeft19"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="20" name="sideLeft20"/>
                            <label class="unit-box" name="sideLeft20"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="21" name="sideLeft21"/>
                            <label class="unit-box" name="sideLeft21"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="22" name="sideLeft22"/>
                            <label class="unit-box" name="sideLeft22"></label>
                        </div>
                        <div class="no-gap">
                            <input type="checkbox" value="23" name="sideLeft23"/>
                            <label class="unit-box" name="sideLeft23"></label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="main-3">
                <div id="checkbox2">
                    <div style="float: right">
                        <div class="no-gap">
                            <input  type="checkbox" value="0" name="sideRight0"/>
                            <label class="unit-box" name="sideRight0"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="1" name="sideRight1"/>
                            <label class="unit-box" name="sideRight1"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="2" name="sideRight2"/>
                            <label class="unit-box" name="sideRight2"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="3" name="sideRight3"/>
                            <label class="unit-box" name="sideRight3"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="4" name="sideRight4"/>
                            <label class="unit-box" name="sideRight4"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="5" name="sideRight5"/>
                            <label class="unit-box" name="sideRight5"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="6" name="sideRight6"/>
                            <label class="unit-box" name="sideRight6"></label>
                        </div>
                    </div>
                    <div>
                        <div class="no-gap">
                            <input  type="checkbox" value="7" name="sideRight7"/>
                            <label class="unit-box" name="sideRight7"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="8" name="sideRight8"/>
                            <label class="unit-box" name="sideRight8"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="9" name="sideRight9"/>
                            <label class="unit-box" name="sideRight9"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="10" name="sideRight10"/>
                            <label class="unit-box" name="sideRight10"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="11" name="sideRight11"/>
                            <label class="unit-box" name="sideRight11"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="12" name="sideRight12"/>
                            <label class="unit-box" name="sideRight12"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="13" name="sideRight13"/>
                            <label class="unit-box" name="sideRight13"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="14" name="sideRight14"/>
                            <label class="unit-box" name="sideRight14"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="15" name="sideRight15"/>
                            <label class="unit-box" name="sideRight15"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="16" name="sideRight16"/>
                            <label class="unit-box" name="sideRight16"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="17" name="sideRight17"/>
                            <label class="unit-box" name="sideRight17"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="18" name="sideRight18"/>
                            <label class="unit-box" name="sideRight18"></label>
                        </div>
                    </div>
                    <div style="float: right">
                        <div class="no-gap">
                            <input  type="checkbox" value="19" name="sideRight19"/>
                            <label class="unit-box" name="sideRight19"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="20" name="sideRight20"/>
                            <label class="unit-box" name="sideRight20"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="21" name="sideRight21"/>
                            <label class="unit-box" name="sideRight21"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="22" name="sideRight22"/>
                            <label class="unit-box" name="sideRight22"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="23" name="sideRight23"/>
                            <label class="unit-box" name="sideRight23"></label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="main-2">
                <img class="spin-img" src="http://xwk-file.oss-cn-qingdao.aliyuncs.com/Home/exam_measure_spin1_wechat.png"
                     alt="bg">
            </div>
        </div>
        <div class="main-right">
            <div class="main-1">
                <div id="checkbox3">
                    <div style="float: right">
                        <div class="no-gap">
                            <input  type="checkbox" value="0" name="frontLeft0"/>
                            <label class="unit-box" name="frontLeft0"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="1" name="frontLeft1"/>
                            <label class="unit-box" name="frontLeft1"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="2" name="frontLeft2"/>
                            <label class="unit-box" name="frontLeft2"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="3" name="frontLeft3"/>
                            <label class="unit-box" name="frontLeft3"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="4" name="frontLeft4"/>
                            <label class="unit-box" name="frontLeft4"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="5" name="frontLeft5"/>
                            <label class="unit-box" name="frontLeft5"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="6" name="frontLeft6"/>
                            <label class="unit-box" name="frontLeft6"></label>
                        </div>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="7" name="frontLeft7"/>
                        <label class="unit-box" name="frontLeft7"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="8" name="frontLeft8"/>
                        <label class="unit-box" name="frontLeft8"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="9" name="frontLeft9"/>
                        <label class="unit-box" name="frontLeft9"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="10" name="frontLeft10"/>
                        <label class="unit-box" name="frontLeft10"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="11" name="frontLeft11"/>
                        <label class="unit-box" name="frontLeft11"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="12" name="frontLeft12"/>
                        <label class="unit-box" name="frontLeft12"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="13" name="frontLeft13"/>
                        <label class="unit-box" name="frontLeft13"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="14" name="frontLeft14"/>
                        <label class="unit-box" name="frontLeft14"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="15" name="frontLeft15"/>
                        <label class="unit-box" name="frontLeft15"></label>
                    </div>
                    <div class="no-gap">
                        <input  type="checkbox" value="16" name="frontLeft16"/>
                        <label class="unit-box" name="frontLeft16"></label>
                    </div>

                        <div class="no-gap">
                            <input  type="checkbox" value="17" name="frontLeft17"/>
                            <label class="unit-box" name="frontLeft17"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="18" name="frontLeft18"/>
                            <label class="unit-box" name="frontLeft18"></label>
                        </div>
                    <div style="float: right">
                        <div class="no-gap">
                            <input  type="checkbox" value="19" name="frontLeft19"/>
                            <label class="unit-box" name="frontLeft19"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="20" name="frontLeft20"/>
                            <label class="unit-box" name="frontLeft20"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="21" name="frontLeft21"/>
                            <label class="unit-box" name="frontLeft21"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="22" name="frontLeft22"/>
                            <label class="unit-box" name="frontLeft22"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="23" name="frontLeft23"/>
                            <label class="unit-box" name="frontLeft23"></label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="main-3">
                <div id="checkbox4">
                    <div>
                        <div class="no-gap">
                            <input  type="checkbox" value="0" name="frontRight0"/>
                            <label class="unit-box" name="frontRight0"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="1" name="frontRight1"/>
                            <label class="unit-box" name="frontRight1"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="2" name="frontRight2"/>
                            <label class="unit-box" name="frontRight2"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="3" name="frontRight3"/>
                            <label class="unit-box" name="frontRight3"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="4" name="frontRight4"/>
                            <label class="unit-box" name="frontRight4"></label>
                        </div>

                        <div class="no-gap">
                            <input  type="checkbox" value="5" name="frontRight5"/>
                            <label class="unit-box" name="frontRight5"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="6" name="frontRight6"/>
                            <label class="unit-box" name="frontRight6"></label>
                        </div>
                    </div>
                    <div style="float: right">
                        <div class="no-gap">
                            <input  type="checkbox" value="7" name="frontRight7"/>
                            <label class="unit-box" name="frontRight7"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="8" name="frontRight8"/>
                            <label class="unit-box" name="frontRight8"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="9" name="frontRight9"/>
                            <label class="unit-box" name="frontRight9"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="10" name="frontRight10"/>
                            <label class="unit-box" name="frontRight10"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="11" name="frontRight11"/>
                            <label class="unit-box" name="frontRight11"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="12" name="frontRight12"/>
                            <label class="unit-box" name="frontRight12"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="13" name="frontRight13"/>
                            <label class="unit-box" name="frontRight13"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="14" name="frontRight14"/>
                            <label class="unit-box" name="frontRight14"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="15" name="frontRight15"/>
                            <label class="unit-box" name="frontRight15"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="16" name="frontRight16"/>
                            <label class="unit-box" name="frontRight16"></label>
                        </div>

                        <div class="no-gap">
                            <input  type="checkbox" value="17" name="frontRight17"/>
                            <label class="unit-box" name="frontRight17"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="18" name="frontRight18"/>
                            <label class="unit-box" name="frontRight18"></label>
                        </div>
                    </div>
                    <div>
                        <div class="no-gap">
                            <input  type="checkbox" value="19" name="frontRight19"/>
                            <label class="unit-box" name="frontRight19"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="20" name="frontRight20"/>
                            <label class="unit-box" name="frontRight20"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="21" name="frontRight21"/>
                            <label class="unit-box" name="frontRight21"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="22" name="frontRight22"/>
                            <label class="unit-box" name="frontRight22"></label>
                        </div>
                        <div class="no-gap">
                            <input  type="checkbox" value="23" name="frontRight23"/>
                            <label class="unit-box" name="frontRight23"></label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="main-2">
                <img class="spin-img" src="http://xwk-file.oss-cn-qingdao.aliyuncs.com/Home/exam_measure_spin2_wechat.png"
                     alt="bg">
            </div>
        </div>
    </div>

    <div class="operation-btn">
        <div class="cancle-btn" v-on:click="cancel">取消</div>
        <if condition="$workorder['status'] eq '-1' && $workorder['creator_id'] eq $customerId">
            <div class="save-btn" v-on:click="save">保存</div>
        </if>
        <if condition="$workorder['status'] eq '2' && $workorder['examinator_id'] eq $customerId && $workorder['exam_time'] eq ''">
            <div class="save-btn" v-on:click="save">保存</div>
        </if>
        <if condition="$workorder['status'] gt '2' && $job[0] eq 100">
            <div class="save-btn" v-on:click="save">保存</div>
        </if>
    </div>

</div>
<include file="./Template/footer.html" />